<template>
  <div class="user">
    <van-cell center class="user-info">
      <div class="user-info-unlogin">
        <van-image :src="require('@/assets/avatar.png')" />
        <span class="name">
          {{ this.userState === '0' ? '游客，您好' : this.user.custTel }}
        </span>
        <van-button v-if="userState === '0'" class="register" size="mini" round type="primary" @click="register">注册会员</van-button>
        <van-button v-if="userState === '1'" class="register" size="mini" round type="primary" @click="realCheck">实名认证</van-button>
        <van-button v-if="userState === '2'" class="register" size="mini" round type="primary">已实名</van-button>
      </div>
    </van-cell>

    <!-- 未实名不展示我的权益 -->
    <div v-if="userState === '2'">
      <div class="user-title">
        <div>我的权益</div>
        <div class="exchange">
<!--          <input type="number" v-model="cardNo" placeholder="请输入卡券进行兑换">-->
          <van-field type="number" v-model="cardNo" label="" placeholder="请输入卡券进行兑换" />
          <van-button size="mini" type="primary" @click="exchange">兑换</van-button>
        </div>
      </div>
      <van-grid :column-num="4" :border="false" class="service">
        <van-grid-item v-for="(service,index) in serviceList" :key="index">
          <van-image width="40px" height="40px" round src=""/>
          <span>{{ service.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="user-title">我的订单</div>
    <van-grid :border="false" :column-num="4" class="order">
      <van-grid-item @click="() => gotoOrder('unpaid')">
        <van-icon size="40px" name="pending-payment"/>
        <span>待付款</span>
      </van-grid-item>
      <van-grid-item @click="() => gotoOrder('unActive')">
        <van-icon size="40px" name="certificate"/>
        <span>待激活</span>
      </van-grid-item>
      <van-grid-item @click="() => gotoOrder('done')">
        <van-icon size="40px" name="paid"/>
        <span>已完成</span>
      </van-grid-item>
      <van-grid-item @click="() => gotoOrder('canceled')">
        <van-icon size="40px" name="close"/>
        <span>已取消</span>
      </van-grid-item>
    </van-grid>

    <div class="user-title">服务与工具</div>
    <van-grid :border="false" :column-num="2">
      <van-grid-item>
        <van-icon size="40px" name="comment-o"/>
        意见反馈
      </van-grid-item>
      <van-grid-item>
        <van-icon size="40px" name="service-o"/>
        在线客服
      </van-grid-item>
    </van-grid>

    <register ref="register"/>
  </div>
</template>

<script>
import diamond from '@/assets/diamond.png'
import Register from "@/view/user/Register";
export default {
  name: 'User',
  components: {Register},
  data() {
    return {
      user: {
        custTel: '',
        realCheck: '1'
      },
      myServiceImg: diamond,
      cardNo: '',
      serviceList: [
        {name:'体检预约',icon:'photo-o',code:''},
        {name:'脂肪肝疗法',icon:'photo-o',code:''}
      ]
    }
  },
  created() {

  },
  computed: {
    userState() {// 未注册、未实名、已实名
      if (!this.user.custTel) {
        return '0'
      }
      if (this.user.realCheck !== '1') {
        return '1'
      }
      return '2'
    }
  },
  methods: {
    // 注册 联登
    register() {
      this.$refs.register.show()
    },
    // 实名认证
    realCheck() {

    },
    // 兑换权益卡
    exchange() {
      console.info(this.cardNo)
      if(!this.cardNo) {
        //
      }
    },
    // 跳转订单页
    gotoOrder(status) {
      console.info(status)
      this.$router.push('/order/' + status)
    }
  }
};
</script>

<style lang="less">
  .user{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #F8F8F8;

    &-title{
      font-weight: bold;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 10px;

      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .exchange{
        display: flex;
        flex-direction: row;
        margin-right: 10px;
        font-size: 14px;
        input{
          border: none;
          margin-right: 10px;
        }
      }
    }

    &-info{
      padding-left: 10px;
      background-color: #FFFFFF;
      height: 100px;

      &-unlogin,&-logined {
        display: flex;
        align-items: center;
        padding-left: 10px;
      }

      .register{
        padding-left: 10px;
        padding-right: 10px;
      }

      .register,.name{
        margin-left: 20px;
        //color: #FFFFFF;
        font-weight: bold;
      }
    }

    .order,.service{
      span{
        font-size: 12px;
      }
    }

    .van-button{
      padding-left: 10px;
      padding-right: 10px;
    }
    .van-grid{
      background-color: #FFFFFF;
    }
    .van-cell{
      padding: 0;
      width: unset;
    }
  }
</style>